import ReactECharts from "echarts-for-react";
import React from "react";
import airpng from "../images/airpng.png";
const AirEcharts = ({ temp }) => {
  // 空气质量指数饼图
  const __CONFIG__ = {
    startAngle: 245,
    endAngle: -65,
    colorTypes: [
      { name: "优", color: "#a7cf8c" },
      { name: "良", color: "#f7da64" },
      { name: "轻度", color: "#f29e39" },
      { name: "中度", color: "#da555d" },
      { name: "重度", color: "#b9377a" },
    ],
    opacityBg: "rgba(8, 138, 213, 0.08)",
  };

  var option = {
    series: [
      {
        name: "外部刻度", // 假设'external scale'是一个有效的属性名（实际上它可能需要引号，但这里按你的要求去掉）
        type: "gauge", // 错误！'gauge'应该是一个字符串，所以这里需要引号："gauge"
        radius: "80%", // '100%'是字符串，需要保留引号
        min: 0,
        max: 100,
        splitNumber: 10,
        startAngle: __CONFIG__.startAngle,
        endAngle: __CONFIG__.endAngle,
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 0,
            opacity: 0,
            color: [
              [0.21, "#1874ff"],
              [
                1,
                "rgba(69, 90, 100, 1)", // 字符串，需要保留引号
              ],
            ],
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: true,
          splitNumber: 7,
          lineStyle: {
            color: "auto",
            width: 2,
          },
          length: 10,
        },
        splitLine: {
          show: true,
          length: 20,
          distance: 9,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        detail: {
          show: false,
        },
        pointer: {
          show: false,
        },
      },
      {
        name: "内部（环形）进度条",
        type: "gauge",
        radius: "50%",
        z: 4,
        startAngle: __CONFIG__.startAngle,
        endAngle: __CONFIG__.endAngle,
        axisLine: {
          lineStyle: {
            color: [[0.21, "#1874ff"]],
            width: 6,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        pointer: {
          show: false,
        },
        title: {
          show: true,
          offsetCenter: ["0%", "20%"],
          fontSize: 10,
          color: "#fff",
        },
        detail: {
          show: true,
          color: __CONFIG__.colorTypes[1].color,
          fontSize: 10,
          fontWeight: "bold",
          offsetCenter: ["0%", "-20%"],
        },
        data: [
          {
            name: "空气质量优",
            value: 50,
          },
        ],
      },
      {
        name: "内部（环形）进度条背景",
        type: "gauge",
        radius: "54%",
        z: 3,
        startAngle: __CONFIG__.startAngle,
        endAngle: __CONFIG__.endAngle,
        axisLine: {
          lineStyle: {
            color: [[1, __CONFIG__.opacityBg]],
            width: 10,
          },
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        detail: {
          show: false,
        },
      },
      {
        type: "pie",
        radius: ["0", "36%"],
        itemStyle: {
          color: __CONFIG__.opacityBg,
        },
        hoverAnimation: false,
        data: [1],
      },
    ],
  };

  return (
    <div style={{ height: "170px",display:'flex',alignItems:'center' }}>
      <ReactECharts option={option} style={{ height: "100%",width:"300px"}} />
      <img src={airpng} alt="" style={{width:"104px",height:"84px"}}/>
    </div>
  );
};

export default AirEcharts;
